window.addEventListener('load', eventWindowLoaded, false);
//json测试数据
var data = {
    point: [
        {
            width: 500,//横坐标
            height: 300,//竖坐标
            radius: 20,//半径
            color: '#000000',//颜色
        },
        {
            width: 500,
            height: 600,
            radius: 20,
            color: '#000000',
        }
    ],
    text:[
        {
            id:1,
            text: '木工组'
        },
        {
            id:2,
            text:'钢筋组'
        }
    ]

};

//加载渲染
function eventWindowLoaded() {
    canvasApp(); //包含整个Canvas应用程序
};

//比例系数控制器
$(document).ready(function () {
    $("#Proportionbtn").click(function () {
        canvasApp(); //改变比例系数  重新渲染整个Canvas应用程序
    })
})

function canvasSupport(e) {
    return !!e.getContext;
};

//画布主函数
function canvasApp() {
    var b = $("#Proportionnum").val();
    var a = parseInt(b);
    var myCanvas = document.getElementById('myCanvas');
    if (!canvasSupport(myCanvas)) {
        return;
    }
    var ctx = myCanvas.getContext('2d');
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;

    //创建新的图片对象
    var img = new Image();
    //指定图片的URL
    img.src = "../index/signin_logo_wahvr.png";
    //浏览器加载图片完毕后再绘制图片
    img.onload = function () {
        //以Canvas画布上的坐标(10,10)为起始点，绘制图像
        ctx.drawImage(img, 300, 300);
    };
    // ctx.drawImage("../images/building/people.jpg",0,0);

    function drawScreen() {
        // 横线与竖线的是距 距越大网格的面积越大
        var dx = a;
        var dy = a;
        // 初始坐标原点
        var x = 0;
        var y = 0;
        var w = myCanvas.width;
        var h = myCanvas.height;
        // 单个步长所表示的长度  
        var xy = 10;
        ctx.strokeStyle = "#28A6F0";
        ctx.translate(0.5,0.5);//线宽平移，处理线条1像素默认宽度问题
        ctx.lineWidth = 1;
        // 画横线
        while (y < h) {
            y = y + dy;
            var yProportion = (xy / 10) - 1;
            ctx.moveTo(x, y);
            ctx.lineTo(w, y);
            ctx.fill();
            //横坐标的数字  
            ctx.font = "15px";
            ctx.fillStyle = "#cd2828";
            ctx.fillText(yProportion, x, y - a + 12);
            xy += 10;
        }
        // 画竖线
        y = 0;
        xy = 10;
        while (x < w) {
            x = x + dx;
            var xProportion = xy / 10;
            ctx.moveTo(x, y);
            ctx.lineTo(x, h);
            ctx.stroke();
            //纵坐标的数字  
            ctx.font = "15px";
            ctx.fillStyle = "#cd2828";
            ctx.fillText(xProportion, x + 3, y + 12);
            xy += 10;
        }
    }

    drawScreen();

    //绘制工种
    var arc = data.point;
    var text= data.text;
    console.log(arc);
    for (var i = 0; i < arc.length; i++) {
        //data[i]表示获得第i个json对象即JSONObject
        //data[i]通过.字段名称即可获得指定字段的值
        var w = arc[i].width;
        var h = arc[i].height;
        var r = arc[i].radius;
        var t = text[i].text;
        console.log(w,h,r,t);

        ctx.beginPath();
        ctx.fillStyle = "rgba(255,0,0,0.5)";
        ctx.arc(w, h, r, 0, 2 * Math.PI);
        ctx.fill();
        ctx.font = "16px 微软雅黑";
        ctx.fillText(t, w-r, h-1.3*r);
    }

    //画实心圆
    ctx.beginPath();
    ctx.fillStyle = "rgba(255,0,0,0.5)";
    ctx.arc(90, 50, 40, 0, 2 * Math.PI);
    ctx.fill();


    //画空心圆
    ctx.beginPath();
    ctx.strokeStyle = "#28A6F0";
    ctx.arc(300, 100, 94, 0, 2 * Math.PI);
    ctx.stroke();

    //绘制一条直线
    ctx.beginPath();
    ctx.lineWidth = 1.0;
    ctx.strokeStyle = "#014888";
    ctx.moveTo(50, 100);
    ctx.lineTo(250, 100);
    ctx.lineCap = "round";
    ctx.stroke();

    // 添加字幕
    // ctx.font = "20px 微软雅黑"; //设置字体
    // ctx.shadowColor = "#64B9D2"; //阴影的颜色
    // ctx.shadowOffsetX = "10px"; //水平投射距离
    // ctx.shadowOffsetY = "10px"; //垂直投射距离
    // ctx.shadowBlur = "12"; //模糊程度
    // ctx.fillText("今天是个好天气", 100, 20);
}